import { Link, Construction, FileRemoved } from '@brillout/docpress'

Everything there is to know about configuration files.

For the list of configurations, see:
 - <Link href="/settings" />
 - <Link href="/hooks" />


## `+` files

You configure your Vike app by creating `+` files such as `+config.js`.

For example, you can set the <Link href="/Page">`Page`</Link> and <Link href="/Layout">`Layout`</Link> settings of a page by defining `+config.js`:

```js
// /pages/product/@id/+config.js

import Page from './Page'
import Layout from './Layout'

export default {
  Page,
  Layout
}
```
```js
// /pages/product/@id/Page.js

export default /* ... */
```
```js
// /pages/product/@id/Layout.js

export default /* ... */
```

For more convenience, you can do this instead:

<FileRemoved>
```js
// /pages/product/@id/+config.js

import Page from './Page'
import Layout from './Layout'

export default {
  Page,
  Layout
}
```
</FileRemoved>
```js
// /pages/product/@id/Page.js // [!code --]
// /pages/product/@id/+Page.js // [!code ++]

export default /* ... */
```
```js
// /pages/product/@id/Layout.js // [!code --]
// /pages/product/@id/+Layout.js // [!code ++]

export default /* ... */
```

Both achieve the same: it's just convenience.

> Except of `+config.js`, any `+` file corresponds to a <Link href="/settings">Vike setting</Link> or a <Link href="/hooks">Vike hook</Link>.


## Inheritance

You can apply configurations to all your pages, a group of pages, or only one page.

For example the <Link href="/Layout">`Layout` setting</Link>:

```yaml
pages/(marketing)/index/+Page.js    # URL: /
pages/(marketing)/about/+Page.js    # URL: /about
# Layout for marketing pages
pages/(marketing)/+Layout.js

pages/admin-panel/index/+Page.js    # URL: /admin-panel
pages/admin-panel/users/+Page.js    # URL: /admin-panel/users
# Layout for admin pages
pages/admin-panel/+Layout.js

pages/product/@id/+Page.js
# Layout for the product page
pages/product/@id/+Layout.js
```

> The directory `(marketing)` is used for <Link href="/routing#groups">grouping</Link> and is ignored by <Link href="/filesystem-routing">Filesystem Routing</Link>.

- `pages/(marketing)/+Layout.js` applies to all pages living at `pages/(marketing)/**`
- `pages/admin-panel/+Layout.js` applies to all pages living at `pages/admin-panel/**`
- `pages/product/@id/+Layout.js` applies to one page `pages/product/@id/+Page.js`
  > Technically `pages/product/@id/+Layout.js` applies to all pages at `/pages/product/@id/**` but there is only one page living there.

#### Defaults

You can set defaults and override them.

For example the <Link href="/ssr">`ssr` setting</Link>:

```js
// pages/+config.js

export default {
  // Disable SSR by default
  ssr: false
}
```

```js
// pages/(marketing)/+config.js

export default {
  // Enable SSR for marketing pages
  ssr: true
}
```

> Cumulative configurations, such as <Link href="/Layout">`<Layout>`</Link>, don't get overriden. See [#1692 - [Cumulative configs] New settings `override` and `default`](https://github.com/vikejs/vike/issues/1692).

#### Domain-driven File Structure

You can use a <Link href="/file-structure#domain-driven">domain-driven file structure</Link> for an improved organization of your pages and their configurations.

#### Powerful

You can use multiple completely different rendering strategies for the same app.

For example, some pages can use Vue without SSR while other pages can use React with SSR:

```js
// pages/admin/+config.js

import vikeVue from 'vike-vue/config'

// Admin pages using Vue without SSR
export default {
  ssr: false,
  extends: [vikeVue]
}
```

```js
// pages/product/@id/+config.js

import vikeReact from 'vike-react/config'

// Product page using React with SSR
export default {
  ssr: true,
  extends: [vikeReact]
}
```


## Pointer imports

Internally, Vike transforms this:

```js
// /pages/+config.js
// Environment: config

import Layout from '../layouts/LayoutDefault.jsx'

export default {
  Layout
}
```

Into:

```js
// /pages/+config.js
// Environment: config

import Layout from '../layouts/LayoutDefault.jsx' // [!code --]
const Layout = 'import:../layouts/LayoutDefault.jsx:default' // [!code ++]

export default {
  Layout
}
```

This enables Vike to load the file `/pages/+config.js` without having to load `LayoutDefault.jsx`. This means that Vike can quickly load all your `+config.js` files without having to load any runtime code.

> These fake imports, which we call *pointer imports*, apply only to `+config.js` files. Imports in other `+` files are normal imports as usual.

It's similar to when you import images:

```js
import logo from '../images/logo.svg'
// When you import an image, you don't actually load it: you get a URL instead.
console.log(logo) // Prints: /assets/logo.svg
```

Vike transforms an import inside `+config.js` to be a pointer import if and only if it resolve to a `.jsx` file, a `.vue` file, or any other file that doesn't end with `.js` or `.ts` (or `.mjs`/`.mts`/`.cjs`/`.cts`). For example:

```js
// /pages/ssr.js
// Environment: config

export default false
```
```js
// /pages/+config.js
// Environment: config

// Resolves to the file LayoutDefault.jsx (a .jsx file) => pointer import
import Layout from '../layouts/LayoutDefault'
// Resolves to the file ssr.js (a .js file) => normal import
import ssr from './ssr'

console.log(Layout) // Prints: import:../layouts/LayoutDefault:default
console.log(ssr) // Prints: false

export default {
  Layout,
  ssr
}
```

> A `.jsx` or `.vue` file is always meant to be client- / server-side runtime code. (I.e. it's never used for config logic.) That's why it makes sense that Vike always treats `.jsx` and `.vue` as pointer imports.

#### Manually mark pointer imports

You can manually mark an import to be a pointer import:

```js
// /pages/+config.js
// Environment: config

import ssr from './ssr' with { type: 'pointer' }
console.log(ssr) // Prints: import:./ssr:default
```

<Construction>The `with { type: 'pointer' }` import attribute isn't implement yet, see workaround at [#1500](https://github.com/vikejs/vike/issues/1500).</Construction>

#### Config code isn't runtime code

The config code in itself is never included in runtimes:

```js
// /pages/some-page/+config.js

// A CSS import in a config file doesn't have any effect. CSS should
// be imported in runtime files such as +Page.js instead.
import './some.css'

// This log is printed only when Vike loads this +config.js file (at development, and when
// building your app). This log isn't included in the client nor server runtime.
// Consequently, you won't see this log in production.
console.log("I will never be logged in production")
```


## See also

- <Link href="/settings" />
- <Link href="/hooks" />
- <Link href="/file-structure#domain-driven" />
